<template>
    <div class="catePage">
        <div class="side">
            <van-sidebar v-model="activeKey" @change="handelChange">
                <van-sidebar-item v-for="(item,index) in tabList"
                :title="item.opt_name"
                :key="index"
                 v-if="index<30"
            />
            </van-sidebar>
        </div>

        <div class="category-container">
            <van-image
                width="100%"
                height="100"
                fit="cover"
                src="https://commimg.pddpic.com/oms_img_ng/2020-11-27/60bdcae9-ca78-428d-86b2-4565fb7a36fd.png?imageView2/2/w/1300/q/80/format/webp"
            />
            <p class="title">本周热门</p>
            <div class="cateList" >
                <van-grid
                        column-num="3"
                        clickable
                        square
                        icon-size="60"
                        :border="false"
                >
                    <van-grid-item
                            v-for="(item,index) in categoryList"
                            :text="item.opt_name"
                            :key="index"
                            :icon="'https://bing.ioliu.cn/v1/rand?w=60&h=60&time='+Math.random()*999"
                    />
                </van-grid>
            </div>
            <index-goods-list :goodsList="goodsList" :picSize="picSize"/>
        </div>
    </div>
</template>

<script>
    import indexGoodsList from "../components/IndexGoodsList";
    export default {
        name: "CatePage",
        data() {
            return {
                activeKey: 0,
                cateList: ["推荐", "女装", "食品", "男装", "手机", "鞋包", "电器", "百货", "母婴", "美妆", "内衣"],
                picSize: {
                    width: "90px",
                    height: "90px"
                },
                tabList:[],
                categoryList:[],
                goodsList:[]
            }
        },
        components: {
            indexGoodsList
        },
        created() {
            this.getCategoryTagList(0)
            this.getCategoryTagList(1)
            this.getKeywordSearchList("食品")
        },
        methods: {
            async getCategoryTagList(opt_id =0) {
                const result = await this.axios.post('/categoryTagList', {
                    opt_id
                })
                if(opt_id===0){
                    this.tabList=result.data
                }
                else{
                    this.categoryList=result.data
                }
            },
            async handelChange(index){
                this.getCategoryTagList(this.tabList[index].opt_id)

                this.getKeywordSearchList(this.tabList[index].opt_name)
            },
            async getKeywordSearchList(keyword){
                try {
                    const result = await this.axios.post('/keywordSearchList',{
                        keyword
                    })
                    this.goodsList = result.data.goods_list
                }catch (e) {
                    console.log(e.message)
                }
            }
        },
    }
</script>

<style lang="less" scoped>
    .catePage {
        display: flex;
        width: 100%;
        /*height: calc( 100vh - 50px );*/
        height: 100vh;
        overflow: hidden;
    }
    .category-container{
            overflow: auto;
            flex:1;
            .title{
                font-size: 28px;
                padding-left: 40px;
                margin-top: 20px;
                color: #58595b;
            }
        }

    .side{
        overflow: auto;
    }
    ::-webkit-scrollbar{
        height: 0;
        width: 0;
        color: transparent;
    }
    .van-sidebar-item--select::before{
        height: 60px !important;
    }
</style>